<template>
  <div style="display: flex;">
    <div :style="{width:(isCollapse ? '64px' : '208px')}">
      <!--unique-opened只允许打开一个菜单项  router允许菜单项进行路由跳转 -->
      <div style="height: 80px;">
         <span style="color: #08f;font-size: 20px;line-height: 100px;padding-left: 1vh;">家庭后台管理系统</span>
      </div>
      <el-menu
            class="el-menu--vertical mainMenu"
            mode="vertical"
            background-color="#f5f5f5"
            active-text-color="#08f"
            text-color="#888"
            :style="{height:100% - '80px'}"
            style="width: 100%;height: 90vh;border: 0;overflow:auto;"
            :collapse="isCollapse"
            :collapse-transition="false"
            router unique-opened
            @select="handleSelect"
            :default-active="activeIndex">
        <el-menu-item index="/main">
          <el-icon style="font-size: 21px;"><Monitor/></el-icon>
          <span>工作台</span>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 21px;"><EditPen/></el-icon>
            <span>签约管理</span>
          </template>
          <el-menu-item index="/1">
            <span>待处理签约</span>
          </el-menu-item>
          <el-menu-item index="/">
            <span>签约记录</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 21px"><Notebook/></el-icon>
            <span>服务管理</span>
          </template>
          <el-menu-item index="/2">
            <span>待处理服务</span>
          </el-menu-item>
          <el-menu-item index="/3">
            <span>服务记录</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/4">
          <el-icon style="font-size: 21px"><Football /></el-icon>
          <span>居民管理</span>
        </el-menu-item>
        <el-menu-item index="/5">
          <el-icon style="font-size: 21px"><ChatDotSquare /></el-icon>
          <span>资料管理</span>
        </el-menu-item>
        <el-sub-menu index="6">
          <template #title>
            <el-icon style="font-size: 21px"><FolderRemove /></el-icon>
            <span>资料管理</span>
          </template>
          <el-menu-item index="/6">
            <span>机构管理</span>
          </el-menu-item>
          <el-menu-item index="/7">
            <span>团队管理</span>
          </el-menu-item>
          <el-menu-item index="/8">
            <span>医生管理</span>
          </el-menu-item>
          <el-menu-item index="/9">
            <span>服务包管理</span>
          </el-menu-item> <el-menu-item index="/">
          <span>服务项目管理</span>
          </el-menu-item>
          <el-menu-item index="/10">
            <span>业绩目标管理</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7">
          <template #title>
            <el-icon style="font-size: 21px"><Histogram /></el-icon>
            <span>数据统计</span>
          </template>
          <el-menu-item index="/11">
            <span>数据概况</span>
          </el-menu-item>
          <el-menu-item index="/12">
            <span>签约业绩统计</span>
          </el-menu-item>
          <el-menu-item index="/13">
            <span>服务业绩统计</span>
          </el-menu-item>
          <el-menu-item index="/14">
            <span>居民健康异常统计</span>
          </el-menu-item>
          <el-menu-item index="/15">
            <span>居民标签统计</span>
          </el-menu-item>
          <el-menu-item index="/16">
            <span>居民年龄统计</span>
          </el-menu-item>
          <el-menu-item index="/17">
            <span>居民学历统计</span>
          </el-menu-item>
          <el-menu-item index="/18">
            <span>居民性别统计</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="8">
          <template #title>
            <el-icon style="font-size: 21px"><Tools /></el-icon>
            <span>系统设置</span>
          </template>
          <el-menu-item index="/label">
            <span>标签管理</span>
          </el-menu-item>
          <el-menu-item index="/role">
            <span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="">
            <span>资讯管理</span>
          </el-menu-item>
          <el-menu-item index="">
            <span>药品管理</span>
          </el-menu-item>
          <el-menu-item index="">
            <span>轮播图管理</span>
          </el-menu-item>
          <el-menu-item index="">
            <span>系统公告</span>
          </el-menu-item>
          <el-menu-item index="">
            <span>协议管理</span>
          </el-menu-item>
          <el-menu-item index="">
            <span>操作日志</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div :style="{width:(isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 208px)')}" style="overflow: hidden;">
      <el-header style="height: 80px;background-color: #f5f5f5;">
        <el-row :gutter="10">
          <el-col :span="16">
            <div class="dropdown-trigger" style="height: 80px;">
              <el-avatar src="/img/u408.jpg" style=""/>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="dropdown-trigger" style="float: right;height: 80px">
              <el-icon style="font-size: 21px;padding-left: 2vh;cursor: pointer;" @click=""><Bell /></el-icon>
            </div>
          </el-col>
          <el-col :span="4">
            <el-dropdown trigger="click" >
              <div class="dropdown-trigger" style="font-size: 19px; font-weight: bold; height: 80px; cursor: pointer;">
                <el-avatar src="/img/u412.png" style="margin-right: 10px;"/>
                <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 100px;">{{ user.username }}</span>
                <el-icon style="margin-left: auto;overflow: hidden;"><arrow-down /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="padding: 0;height: 850px;background-color: #F0F0F0">
        <router-view></router-view>
      </el-main>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";

const isCollapse = ref(false);
const activeIndex = ref(getActiveIndex());
const user = ref({
  username:'张三'
})
const handleSelect = (index)=>{
  activeIndex.value = index;
  localStorage.activeIndex = index;
}
</script>

<style scoped>
/* 菜单项悬停时的样式 */
.el-menu--vertical .el-menu-item:hover {
  color: #000; /* 悬停时的文本颜色 */
  background-color: #f5f5f5; /* 悬停时的背景颜色 */
}
/* 菜单项选中时的样式 */
.el-menu--vertical .el-menu-item.is-active {
  color: #f5f5f5; /* 选中时的文本颜色 */
  background-color: #2984F8; /* 选中时的背景颜色 */
}

/* 子菜单的默认样式 */
.el-menu--vertical .el-sub-menu .el-menu-item {
  background-color: #f5f5f5; /* 子菜单项的背景颜色 */
  color: #000; /* 子菜单项的文本颜色 */
}
/* 子菜单项选中时的样式 */
.el-menu--vertical .el-sub-menu .el-menu-item.is-active {
  color: #f5f5f5 !important; /* 选中时的文本颜色 */
  background-color: #2984F8 !important; /* 选中时的背景颜色 */
}
/* 子菜单项悬停时的样式 */
.el-menu--vertical .el-sub-menu .el-menu-item:hover {
  color: #409eff; /* 悬停时的文本颜色 */
  background-color: #f5f5f5; /* 悬停时的背景颜色 */
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}



</style>
